{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="bi bi-envelope-fill me-2"></i>邮件管理
    </h2>
    <div class="btn-group">
        <button class="btn btn-outline-primary" onclick="location.reload()">
            <i class="bi bi-arrow-clockwise me-1"></i>刷新
        </button>
        <a href="{{ url_for('admin.dashboard') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>返回仪表板
        </a>
    </div>
</div>

<!-- 搜索栏 -->
<div class="row mb-4">
    <div class="col-md-6">
        <form method="GET" class="d-flex">
            <input type="text" name="search" class="form-control me-2" 
                   placeholder="搜索邮件主题或内容..." 
                   value="{{ search or '' }}">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-search"></i>
            </button>
            {% if search %}
            <a href="{{ url_for('admin.emails') }}" class="btn btn-outline-secondary ms-2">
                <i class="bi bi-x"></i>
            </a>
            {% endif %}
        </form>
    </div>
    <div class="col-md-6 text-end">
        <span class="text-muted">
            共找到 {{ emails.total }} 封邮件
            {% if search %}
            （搜索："{{ search }}"）
            {% endif %}
        </span>
    </div>
</div>

<!-- 邮件列表 -->
<div class="card">
    <div class="card-body">
        {% if emails.items %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th width="5%">ID</th>
                        <th width="20%">发件人</th>
                        <th width="20%">收件人</th>
                        <th width="30%">主题</th>
                        <th width="15%">发送时间</th>
                        <th width="8%">状态</th>
                        <th width="7%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for email in emails.items %}
                    <tr class="{% if not email.is_read %}table-warning{% endif %}">
                        <td>{{ email.id }}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-person-circle me-2"></i>
                                <div>
                                    <div class="fw-bold">{{ email.sender.username }}</div>
                                    <small class="text-muted">{{ email.sender.email }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-person-circle me-2"></i>
                                <div>
                                    <div class="fw-bold">{{ email.recipient.username }}</div>
                                    <small class="text-muted">{{ email.recipient.email }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="fw-bold">{{ email.subject[:50] }}{% if email.subject|length > 50 %}...{% endif %}</div>
                            <small class="text-muted">{{ email.content[:80] }}{% if email.content|length > 80 %}...{% endif %}</small>
                        </td>
                        <td>
                            <div>{{ email.sent_at.strftime('%Y-%m-%d') }}</div>
                            <small class="text-muted">{{ email.sent_at.strftime('%H:%M:%S') }}</small>
                        </td>
                        <td>
                            <div class="d-flex flex-column">
                                {% if email.is_read %}
                                <span class="badge bg-success mb-1">已读</span>
                                {% else %}
                                <span class="badge bg-warning mb-1">未读</span>
                                {% endif %}
                                
                                {% if email.is_deleted_by_sender or email.is_deleted_by_recipient %}
                                <span class="badge bg-danger">已删除</span>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ url_for('admin.email_detail', email_id=email.id) }}" 
                                   class="btn btn-outline-info" title="查看详情">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        {% if emails.pages > 1 %}
        <nav aria-label="邮件分页">
            <ul class="pagination justify-content-center mt-4">
                {% if emails.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin.emails', page=emails.prev_num, search=search) }}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>
                {% endif %}

                {% for page_num in emails.iter_pages() %}
                    {% if page_num %}
                        {% if page_num != emails.page %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('admin.emails', page=page_num, search=search) }}">
                                {{ page_num }}
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">…</span>
                    </li>
                    {% endif %}
                {% endfor %}

                {% if emails.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin.emails', page=emails.next_num, search=search) }}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>

        <div class="text-center text-muted mt-3">
            显示第 {{ (emails.page - 1) * 20 + 1 }} - {{ emails.page * 20 if emails.page * 20 < emails.total else emails.total }} 条，
            共 {{ emails.total }} 条记录，第 {{ emails.page }} / {{ emails.pages }} 页
        </div>
        {% endif %}

        {% else %}
        <div class="text-center py-5">
            <i class="bi bi-inbox display-1 text-muted"></i>
            <h4 class="mt-3 text-muted">
                {% if search %}
                没有找到匹配的邮件
                {% else %}
                暂无邮件数据
                {% endif %}
            </h4>
            {% if search %}
            <p class="text-muted">尝试使用不同的关键词搜索</p>
            <a href="{{ url_for('admin.emails') }}" class="btn btn-outline-primary">
                <i class="bi bi-arrow-left me-1"></i>查看所有邮件
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

<style>
.table-responsive {
    border-radius: 0.375rem;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}

.table td {
    vertical-align: middle;
}

.badge {
    font-size: 0.75em;
}

.pagination .page-link {
    color: #0d6efd;
    border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.table-warning {
    --bs-table-bg: rgba(255, 193, 7, 0.1);
}
</style>
{% endblock %}